<template>
  <div class="common_layer_a" v-if="recommendBig && recommendSmall">
    <div class="warp">
      <h2 class="title"><slot></slot></h2>
      <router-link
        tag="div"
        :to="{
          name: 'comment',
          query: { id: recommendBig.id, title: recommendBig.title },
        }"
        class="top"
      >
        <div class="left">
          <div class="img">
            <img :src="recommendBig.cover" alt="" />
          </div>
        </div>
        <div class="right">
          <p class="book">
            <i class="name">{{ recommendBig.title }}</i>
          </p>
          <p class="type">
            <span>{{ recommendBig.category }}</span
            ><i>都市</i>
          </p>
          <p class="description">
            {{ recommendBig.recomContent }}
          </p>
        </div>
      </router-link>
      <div class="bottom">
        <ul>
          <router-link
            tag="li"
            :to="{
              name: 'comment',
              query: { id: recommend.id, title: recommend.title },
            }"
            v-for="recommend in recommendSmall"
            :key="recommend.id"
          >
            <div class="img"><img :src="recommend.cover" alt="" /></div>
            <div class="book_name">
              <p>{{ recommend.title }}</p>
              <span>500章未读</span>
            </div>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["recommendBig", "recommendSmall"],
};
</script>
<style lang="less" scoped>
.common_layer_a {
  padding: 0 13px;
  .warp {
    border-bottom: 1px solid #eeeeee;
    padding: 13px 0;
    .title {
      font-size: 18px;
      color: #232323;
      font-weight: 600;
    }

    .top {
      margin-top: 20px;
      display: flex;
      .left {
        .img {
          width: 80px;
          height: 105px;
          box-shadow: 3px 2px 8px -3px #706e6b;
          img {
            width: 80px;
            height: 105px;
          }
        }
      }
      .right {
        flex: 1;
        margin-left: 13px;
        line-height: 20px;
        .book {
          display: flex;
          i {
            font-style: normal;
            font-size: 16px;
            font-weight: 600;
            color: #383838;
          }
        }
        .description {
          font-size: 12px;
          color: #7a7a7a;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden; //溢出内容隐藏
          text-overflow: ellipsis; //文本溢出部分用省略号表示
          display: -webkit-box; //特别显示模式
          -webkit-line-clamp: 3; //行数
          line-clamp: 3;
          -webkit-box-orient: vertical; //盒子中内容竖直排列
          width: 100%;
        }
        .type {
          position: relative;
          color: #a2a2a2;
          font-size: 12px;
          i {
            margin-left: 10px;
          }
          &::after {
            position: absolute;
            top: 50%;
            left: 52px;
            transform: translateY(-50%);
            width: 1px;
            height: 10px;
            content: "";
            background-color: #ececec;
          }
        }
      }
    }
    .bottom {
      width: 100%;
      ul {
        display: flex;
        margin-top: 15px;
        justify-content: space-between;
        // & li:nth-of-type(3n) {
        //   margin-right: 0;
        // }
        li {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          // margin-right: 23px;
          .img {
            width: 80px;
            height: 110px;
            box-shadow: 3px 2px 8px -3px #706e6b;
            img {
              width: 80px;
              height: 110px;
              border-radius: 5px;
            }
          }
          .book_name {
            // width: 100%;

            p {
              font-size: 14px;
              color: #000000;
              width: 100%;
              white-space: word-break;
              height: 25px;
              line-height: 25px;
            }
            span {
              font-size: 12px;
              color: #d4d4d4;
            }
          }
        }
      }
    }
  }
}
</style>